<template>
  <div class="mixin-components-container">
    <el-row>
      <el-form ref="form" :model="form" label-width="130px">
        <el-card class="box-card" style="margin-bottom:20px;">
          <div slot="header" class="clearfix">
            <span>修改I2C协议</span>
          </div>
          <div>
            <el-form-item label="服务ID" class="is-required">
              <el-input v-model.number="form.id" placeholder="请输入一个整数" />
            </el-form-item>
            <el-form-item label="服务名称" class="is-required">
              <el-input v-model="form.ServiceName" placeholder="请输入服务名称" />
            </el-form-item>
            <el-form-item label="协议名称" class="is-required">
              <el-input v-model="form.ProtocolName" :disabled="true" />
            </el-form-item>
            <el-form-item label="协议编号" class="is-required">
              <el-input v-model="form.ProtocolNum" :disabled="true" />
            </el-form-item>
            <el-form-item label="服务地址" class="is-required">
              <el-input v-model="form.ServiceAddress" placeholder="请输入服务地址" />
            </el-form-item>
            <el-form-item label="外接设备地址" class="is-required">
              <el-input v-model="form.ProtocolData.DeviceAddress" placeholder="请输入外接设备地址" />
            </el-form-item>
            <el-form-item label="IO" class="is-required">
              <el-select v-model.number="form.ProtocolData.IO" placeholder="请选择IO">
                <el-option label="0" :value="0" />
                <el-option label="1" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="寄存器地址1" class="is-required">
              <el-input v-model="form.ProtocolData.RegisterAddress[0].RegisterAddress1" placeholder="请输入寄存器地址" />
            </el-form-item>
            <el-form-item label="偏移量1" class="is-required">
              <el-input v-model="form.ProtocolData.RegisterAddress[0].Offset1" placeholder="请输入偏移量" />
            </el-form-item>
            <el-form-item label="寄存器地址2">
              <el-input v-model="form.ProtocolData.RegisterAddress[1].RegisterAddress2" />
            </el-form-item>
            <el-form-item label="偏移量2">
              <el-input v-model="form.ProtocolData.RegisterAddress[1].Offset2" />
            </el-form-item>
            <el-form-item label="寄存器地址3">
              <el-input v-model="form.ProtocolData.RegisterAddress[2].RegisterAddress3" />
            </el-form-item>
            <el-form-item label="偏移量3">
              <el-input v-model="form.ProtocolData.RegisterAddress[2].Offset3" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Save">保存配置</el-button>
              <el-button type="danger" style="margin-left:10px" @click="Remove">删除</el-button>
              <router-link :to="'/protocol/table'">
                <el-button type="info" style="margin-left:10px">取消</el-button>
              </router-link>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      id: this.$route?.query.id,
      form: {
        id: undefined,
        ServiceName: '',
        ProtocolNum: '1003', // string 协议编号
        ProtocolName: 'I2C', // string 协议名称
        ServiceAddress: '',
        ProtocolData: {
          ProtocolNum: '1003', // string 协议编号
          ProtocolName: 'I2C', // string 协议名称
          DeviceAddress: '', // int 外接设备地址(十六进制)
          IO: 0, // int 0代表读 1代表写 默认为0
          BusId: '8',
          RegisterAddress: [
            {
              RegisterAddress1: '', // 寄存器十六进制地址
              Offset1: ''// 偏移量
            },
            {
              RegisterAddress2: '', // 寄存器十六进制地址
              Offset2: '' // 偏移量
            },
            {
              RegisterAddress3: '', // 寄存器十六进制地址
              Offset3: '' // 偏移量
            }
          ]
        }
      }
    }
  },
  mounted() {
    this.Set()
  },
  methods: {
    Set() {
      axios({
        method: 'get',
        url: `http://192.168.10.152:5002/protocol/set_parameter/${this.id}`
      }).then((res) => {
        this.form = res.data.data
        console.log(res)
      })
    },
    Save() {
      axios({
        method: 'post',
        url: `http://192.168.10.152:5002/protocol/save_parameter/${this.id}`,
        data: this.form
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success('保存成功')
          setTimeout(() => {
            this.$router.push({
              path: '/protocol/table'
            })
          }, 1000)
        }
        console.log(res)
      })
    },
    Remove() {
      axios({
        method: 'get',
        url: `http://192.168.10.152:5002/protocol/delete_protocol/${this.id}`
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success('删除成功!')
            setTimeout(() => {
              this.$router.push({
                path: '/protocol/table'
              })
            }, 1000)
          }
        })
    }
  }
}
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item{
  min-height: 100px;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
